<!DOCTYPE html>
<html ng-app="demoApp">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单选框 - ng-components-ui</title>
    <link rel="stylesheet" href="../dist/ng-components.css" />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        margin: 0;
        padding: 0;
        background: #f5f5f5;
      }

      .header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px 40px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .header h1 {
        margin: 0 0 10px 0;
        font-size: 32px;
      }

      .header p {
        margin: 0;
        opacity: 0.9;
        font-size: 16px;
      }

      .back-link {
        display: inline-block;
        margin-top: 15px;
        color: white;
        text-decoration: none;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        transition: background 0.2s;
      }

      .back-link:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 40px;
      }

      .demo-section {
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 30px;
      }

      .demo-section h2 {
        margin: 0 0 20px 0;
        color: #333;
        font-size: 20px;
        border-bottom: 2px solid #667eea;
        padding-bottom: 10px;
      }

      .demo-section h3 {
        margin: 20px 0 15px 0;
        color: #555;
        font-size: 16px;
        font-weight: 600;
      }

      .demo-section p {
        color: #666;
        line-height: 1.6;
        margin: 0 0 15px 0;
      }

      .debug-output {
        background: #2d3748;
        color: #e2e8f0;
        padding: 20px;
        border-radius: 6px;
        margin-top: 20px;
        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
        font-size: 13px;
      }

      .debug-output strong {
        color: #90cdf4;
        display: block;
        margin-bottom: 10px;
      }

      .debug-output pre {
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word;
      }

      .tree-demo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 30px;
        margin-top: 20px;
      }

      .tree-demo-item {
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 20px;
        background: #fafafa;
      }

      .tree-demo-item h3 {
        margin: 0 0 15px 0;
        color: #667eea;
        font-size: 15px;
      }

      .code-block {
        background: #f7fafc;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        padding: 15px;
        margin: 10px 0;
        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
        font-size: 12px;
        overflow-x: auto;
      }

      .code-block code {
        color: #2d3748;
      }

      .feature-list {
        background: #f7fafc;
        border-left: 4px solid #667eea;
        padding: 15px 20px;
        margin: 20px 0;
      }

      .feature-list ul {
        margin: 0;
        padding-left: 20px;
      }

      .feature-list li {
        color: #4a5568;
        margin: 8px 0;
        line-height: 1.6;
      }
    </style>
  </head>
  <body ng-controller="DemoController">
    <div class="header">
      <h1>单选框组件</h1>
      <p>支持水平和垂直布局的单选框组件</p>
      <a href="home.html" class="back-link">← 返回主页</a>
    </div>

    <div class="container">
      <div class="demo-section">
        <h2>单选框组件</h2>

        <div class="feature-list">
          <strong>功能特性:</strong>
          <ul>
            <li>支持水平和垂直布局</li>
            <li>支持禁用整个组件或单个选项</li>
            <li>支持字符串数组或对象数组作为选项</li>
            <li>双向数据绑定</li>
            <li>优雅的选中/悬停效果</li>
            <li>响应式设计</li>
          </ul>
        </div>

        <div class="tree-demo-grid">
          <!-- Demo 1: 基本水平布局 -->
          <div class="tree-demo-item">
            <h3>1. 基本水平布局</h3>
            <p>默认水平排列的单选框</p>
            <ng-radio
              options="radioOptions1"
              ng-model="radioValue1"
              name="radio1"
              layout="horizontal">
            </ng-radio>
            <div class="debug-output">
              <strong>选中的值:</strong>
              <pre>{{ radioValue1 | json }}</pre>
            </div>
          </div>

          <!-- Demo 2: 垂直布局 -->
          <div class="tree-demo-item">
            <h3>2. 垂直布局</h3>
            <p>选项垂直排列</p>
            <ng-radio
              options="radioOptions1"
              ng-model="radioValue2"
              name="radio2"
              layout="vertical">
            </ng-radio>
            <div class="debug-output">
              <strong>选中的值:</strong>
              <pre>{{ radioValue2 | json }}</pre>
            </div>
          </div>

          <!-- Demo 3: 对象数组选项 -->
          <div class="tree-demo-item">
            <h3>3. 对象数组选项</h3>
            <p>使用 label 和 value 分离的对象数组</p>
            <ng-radio
              options="radioOptions2"
              ng-model="radioValue3"
              name="radio3"
              layout="horizontal">
            </ng-radio>
            <div class="debug-output">
              <strong>选中的值:</strong>
              <pre>{{ radioValue3 | json }}</pre>
            </div>
          </div>

          <!-- Demo 4: 禁用整个组件 -->
          <div class="tree-demo-item">
            <h3>4. 禁用整个组件</h3>
            <p>所有选项都不可选</p>
            <ng-radio
              options="radioOptions1"
              ng-model="radioValue4"
              name="radio4"
              disabled="true"
              layout="horizontal">
            </ng-radio>
            <div class="debug-output">
              <strong>选中的值:</strong>
              <pre>{{ radioValue4 | json }}</pre>
            </div>
          </div>

          <!-- Demo 5: 部分选项禁用 -->
          <div class="tree-demo-item">
            <h3>5. 部分选项禁用</h3>
            <p>某些选项不可选</p>
            <ng-radio
              options="radioOptions3"
              ng-model="radioValue5"
              name="radio5"
              layout="horizontal">
            </ng-radio>
            <div class="debug-output">
              <strong>选中的值:</strong>
              <pre>{{ radioValue5 | json }}</pre>
            </div>
          </div>

          <!-- Demo 6: 带初始值 -->
          <div class="tree-demo-item">
            <h3>6. 带初始值</h3>
            <p>加载时已选中默认值</p>
            <ng-radio
              options="radioOptions1"
              ng-model="radioValue6"
              name="radio6"
              layout="horizontal">
            </ng-radio>
            <div class="debug-output">
              <strong>选中的值:</strong>
              <pre>{{ radioValue6 | json }}</pre>
            </div>
          </div>

          <!-- Demo 7: 数字选项 -->
          <div class="tree-demo-item">
            <h3>7. 数字选项</h3>
            <p>选项值为数字类型</p>
            <ng-radio
              options="radioOptions4"
              ng-model="radioValue7"
              name="radio7"
              layout="horizontal">
            </ng-radio>
            <div class="debug-output">
              <strong>选中的值:</strong>
              <pre>{{ radioValue7 | json }}</pre>
              <div style="margin-top: 10px; padding: 8px; background: #f0f0f0; border-radius: 4px; font-size: 12px;">
                <strong>类型:</strong> {{ getType(radioValue7) }}
              </div>
            </div>
          </div>

          <!-- Demo 8: 长列表垂直布局 -->
          <div class="tree-demo-item">
            <h3>8. 长列表垂直布局</h3>
            <p>适合较多选项的场景</p>
            <ng-radio
              options="radioOptions5"
              ng-model="radioValue8"
              name="radio8"
              layout="vertical">
            </ng-radio>
            <div class="debug-output">
              <strong>选中的值:</strong>
              <pre>{{ radioValue8 | json }}</pre>
            </div>
          </div>
        </div>

        <div class="code-block" style="margin-top: 30px;">
          <code>
// HTML 使用方式<br>
&lt;ng-radio<br>
&nbsp;&nbsp;options="options"<br>
&nbsp;&nbsp;ng-model="selectedValue"<br>
&nbsp;&nbsp;name="radioGroup"<br>
&nbsp;&nbsp;disabled="false"<br>
&nbsp;&nbsp;layout="horizontal"&gt;<br>
&lt;/ng-radio&gt;<br>
<br>
// Controller 中 - 字符串数组<br>
$scope.options = ['选项1', '选项2', '选项3'];<br>
$scope.selectedValue = '选项1';<br>
<br>
// Controller 中 - 对象数组<br>
$scope.options = [<br>
&nbsp;&nbsp;{ label: '显示文本1', value: 'value1' },<br>
&nbsp;&nbsp;{ label: '显示文本2', value: 'value2', disabled: true },<br>
&nbsp;&nbsp;{ label: '显示文本3', value: 'value3' }<br>
];<br>
$scope.selectedValue = 'value1';
          </code>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/angular@1.8.3/angular.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/angular-strap@2.3.12/dist/angular-strap.min.js"></script>
    <script src="../dist/ng-components.js"></script>
    <script>
      angular
        .module("demoApp", ["ngComponents"])
        .controller("DemoController", function ($scope) {
          // 辅助函数：获取变量类型
          $scope.getType = function(value) {
            return typeof value;
          };

          // Radio Demo Data
          // 基本字符串数组
          $scope.radioOptions1 = ['选项A', '选项B', '选项C'];

          // 对象数组
          $scope.radioOptions2 = [
            { label: '苹果', value: 'apple' },
            { label: '香蕉', value: 'banana' },
            { label: '橙子', value: 'orange' }
          ];

          // 部分禁用的选项
          $scope.radioOptions3 = [
            { label: '可选项1', value: 'option1' },
            { label: '禁用项', value: 'option2', disabled: true },
            { label: '可选项2', value: 'option3' }
          ];

          // 数字选项
          $scope.radioOptions4 = [1, 2, 3, 4, 5];

          // 长列表
          $scope.radioOptions5 = [
            { label: '北京', value: 'beijing' },
            { label: '上海', value: 'shanghai' },
            { label: '广州', value: 'guangzhou' },
            { label: '深圳', value: 'shenzhen' },
            { label: '杭州', value: 'hangzhou' },
            { label: '成都', value: 'chengdu' },
            { label: '武汉', value: 'wuhan' }
          ];

          // 初始化选中值
          $scope.radioValue1 = '';
          $scope.radioValue2 = '';
          $scope.radioValue3 = '';
          $scope.radioValue4 = '选项A'; // 禁用状态的初始值
          $scope.radioValue5 = 'option1';
          $scope.radioValue6 = '选项B'; // 带初始值
          $scope.radioValue7 = 3; // 数字初始值
          $scope.radioValue8 = 'beijing';
        });
    </script>
  </body>
</html>
